<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>计算属性的getter和setter方法</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <div id="demo"></div>
        <script>
            var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName_test: function () {
      return this.firstName + ' ' + this.lastName
    },
    //计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
    fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
  }
})
        </script>
    </body>
</html>